<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>自定义歌单组件playlist | lll</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/myblog/img/favicon.ico">
    <link rel="stylesheet" href="/myblog/css/style.css">
    <meta name="description" content="lll">
    
    <link rel="preload" href="/myblog/assets/css/0.styles.6d34f8a8.css" as="style"><link rel="preload" href="/myblog/assets/js/app.5e430372.js" as="script"><link rel="preload" href="/myblog/assets/js/2.4f8c3bb6.js" as="script"><link rel="preload" href="/myblog/assets/js/19.8d4a4dec.js" as="script"><link rel="prefetch" href="/myblog/assets/js/10.64c8fab5.js"><link rel="prefetch" href="/myblog/assets/js/11.6c6d1141.js"><link rel="prefetch" href="/myblog/assets/js/12.1ce59adc.js"><link rel="prefetch" href="/myblog/assets/js/13.0042d6cf.js"><link rel="prefetch" href="/myblog/assets/js/14.38257b60.js"><link rel="prefetch" href="/myblog/assets/js/15.cfd9bf68.js"><link rel="prefetch" href="/myblog/assets/js/16.4a7d6f31.js"><link rel="prefetch" href="/myblog/assets/js/17.49202f3b.js"><link rel="prefetch" href="/myblog/assets/js/18.9c119c8b.js"><link rel="prefetch" href="/myblog/assets/js/20.ed64e210.js"><link rel="prefetch" href="/myblog/assets/js/21.f5ff3b18.js"><link rel="prefetch" href="/myblog/assets/js/22.de81f692.js"><link rel="prefetch" href="/myblog/assets/js/23.0c58312b.js"><link rel="prefetch" href="/myblog/assets/js/24.94b1183d.js"><link rel="prefetch" href="/myblog/assets/js/25.62df09b8.js"><link rel="prefetch" href="/myblog/assets/js/26.508dea78.js"><link rel="prefetch" href="/myblog/assets/js/27.cbb5edb3.js"><link rel="prefetch" href="/myblog/assets/js/3.f34952a8.js"><link rel="prefetch" href="/myblog/assets/js/4.c092b489.js"><link rel="prefetch" href="/myblog/assets/js/5.42cf8a50.js"><link rel="prefetch" href="/myblog/assets/js/6.adeeeaa0.js"><link rel="prefetch" href="/myblog/assets/js/7.81f6d2e5.js"><link rel="prefetch" href="/myblog/assets/js/8.2cd4d454.js"><link rel="prefetch" href="/myblog/assets/js/9.8155b098.js">
    <link rel="stylesheet" href="/myblog/assets/css/0.styles.6d34f8a8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/myblog/" class="home-link router-link-active"><!----> <span class="site-name">lll</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="微信小程序项目" class="dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow down"></span></button> <button type="button" aria-label="微信小程序项目" class="mobile-dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/guide/" class="nav-link router-link-active">
  wxapp-music
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试宝典" class="dropdown-title"><span class="title">面试宝典</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试宝典" class="mobile-dropdown-title"><span class="title">面试宝典</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/baodian/zero/" class="nav-link">
  初级开发篇
</a></li><li class="dropdown-item"><!----> <a href="/myblog/baodian/high/" class="nav-link">
  中高进阶篇
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具箱" class="dropdown-title"><span class="title">工具箱</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具箱" class="mobile-dropdown-title"><span class="title">工具箱</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          在线编辑
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  图片压缩
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          在线服务
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cloud.tencent.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  腾讯云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          博客指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://juejin.im/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.csdn.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="微信小程序项目" class="dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow down"></span></button> <button type="button" aria-label="微信小程序项目" class="mobile-dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/guide/" class="nav-link router-link-active">
  wxapp-music
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试宝典" class="dropdown-title"><span class="title">面试宝典</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试宝典" class="mobile-dropdown-title"><span class="title">面试宝典</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/baodian/zero/" class="nav-link">
  初级开发篇
</a></li><li class="dropdown-item"><!----> <a href="/myblog/baodian/high/" class="nav-link">
  中高进阶篇
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具箱" class="dropdown-title"><span class="title">工具箱</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具箱" class="mobile-dropdown-title"><span class="title">工具箱</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          在线编辑
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  图片压缩
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          在线服务
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cloud.tencent.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  腾讯云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          博客指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://juejin.im/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.csdn.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序端项目导学</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>后台管理系统项目导学</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>云开发与Serverless</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>项目代码结构初始化</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>小程序端项目开始</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/myblog/guide/notes/09.html" class="sidebar-link">轮播图组件 swiper</a></li><li><a href="/myblog/guide/notes/10.html" class="sidebar-link">组件化开发</a></li><li><a href="/myblog/guide/notes/11.html" aria-current="page" class="active sidebar-link">自定义歌单组件playlist</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#使用自定义组件" class="sidebar-link">使用自定义组件</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#父子组件的传值-父传子" class="sidebar-link">父子组件的传值（父传子）</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#播放数量细节处理" class="sidebar-link">播放数量细节处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#数据监听器-observers" class="sidebar-link">数据监听器(observers)</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#数字格式化处理" class="sidebar-link">数字格式化处理</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#读取歌单数据-并且插入数据库-旧" class="sidebar-link">读取歌单数据，并且插入数据库(旧)</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#创建云函数getplaylist" class="sidebar-link">创建云函数getPlaylist</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#如何发送请求" class="sidebar-link">如何发送请求</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#上传云函数" class="sidebar-link">上传云函数</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#云端测试" class="sidebar-link">云端测试</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#将数据插入数据库" class="sidebar-link">将数据插入数据库</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#读取歌单数据-并且插入数据库-新" class="sidebar-link">读取歌单数据，并且插入数据库(新)</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#新的发送请求的方式" class="sidebar-link">新的发送请求的方式</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#歌单数据去重" class="sidebar-link">歌单数据去重</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#突破获取数据条数限制" class="sidebar-link">突破获取数据条数限制</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#上传触发器" class="sidebar-link">上传触发器</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#上拉加载和下拉刷新" class="sidebar-link">上拉加载和下拉刷新</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#查询歌单信息" class="sidebar-link">查询歌单信息</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#对云函数路由进行优化" class="sidebar-link">对云函数路由进行优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#为什么要使用tcb-router" class="sidebar-link">为什么要使用tcb-router</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/11.html#使用tcb-router优化之前获取数据的代码" class="sidebar-link">使用tcb-router优化之前获取数据的代码</a></li></ul></li></ul></li><li><a href="/myblog/guide/notes/12.html" class="sidebar-link">自定义歌曲列表组件musiclist</a></li><li><a href="/myblog/guide/notes/13.html" class="sidebar-link">播放器页面player</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义歌单组件playlist"><a href="#自定义歌单组件playlist" class="header-anchor">#</a> 自定义歌单组件playlist</h1> <h2 id="使用自定义组件"><a href="#使用自定义组件" class="header-anchor">#</a> 使用自定义组件</h2> <p>要想使用自定义组件，在我们当前想使用这个组件的页面中，点开对应的json文件，进行相关的配置,引入想使用的自定义组件。</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;x-playlist&quot;</span><span class="token operator">:</span><span class="token string">&quot;/components/playlist&quot;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>配置完成之后，我们需要在wxml的文件中使用这个组件，方式是用配置的组件名作为标签使用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-playlist</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-playlist</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="父子组件的传值-父传子"><a href="#父子组件的传值-父传子" class="header-anchor">#</a> 父子组件的传值（父传子）</h2> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>playlist-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{playList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-playlist</span> <span class="token attr-name">playlist</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>x-playlist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-playlist</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>要想实现父子组件之间的传值，我们需要在父组件中自定义一个属性<code>playlist</code>，并且将想要传递的数据赋值给它。在子组件中，要想接收父组件传递的数据，我们需要在子组件的<code>properties</code>中定义传递来的数据</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">/**
   * 组件的属性列表
   */</span>
  properties<span class="token operator">:</span> <span class="token punctuation">{</span>
    playlist<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>接收完成后，我们就可以在子组件页面中使用这些数据：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 歌单组件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>playlist<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
	<span class="token comment">&lt;!-- 图片部分 --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picUrl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{playlist.picUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
		<span class="token comment">&lt;!-- 播放数量 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>playCount<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span>{{playCount}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
	<span class="token comment">&lt;!-- 介绍部分 --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{playlist.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="播放数量细节处理"><a href="#播放数量细节处理" class="header-anchor">#</a> 播放数量细节处理</h2> <p>由于我们从后台获取过来的播放数量<code>playCount</code>是很长的一串数字，所以我们需要将其格式化处理，然后显示在页面上。</p> <h3 id="数据监听器-observers"><a href="#数据监听器-observers" class="header-anchor">#</a> 数据监听器(observers)</h3> <p>要想修改从<strong>父组件</strong>传递过来的数据，我们需要通过<code>数据监听器</code>来进行修改。首先我们需要在<code>properties</code>的同一级创建<code>数据监听器observers</code>，里面要写的是具体对谁进行监听，例如，我想要对<strong>playlist对象</strong>进行监听，那么可以这样写：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>observers<span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token function">playlist</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果是要对<strong>playlist对象</strong>里面的<strong>某个属性</strong>进行监听，可以通过['']包裹属性的方式，例如：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>observers<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token punctuation">[</span><span class="token string">'playlist.playCount'</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">提示</p> <p>数据监听器observers可以监听组件内任意一个值的变化，效果同watch类似，具体的区别可以参考：<a href="https://developers.weixin.qq.com/miniprogram/dev/extended/utils/computed.html#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%AF%B4%E6%98%8E" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <h3 id="数字格式化处理"><a href="#数字格式化处理" class="header-anchor">#</a> 数字格式化处理</h3> <p>通过以上的操作之后，我们可以获取到<strong>playlist</strong>里面的<strong>playCount播放次数</strong>属性。在<code>methods</code>中定义<code>getPlayCount(val,figure)</code>方法</p> <blockquote><p>其中参数val表示播放次数，figure表示保留小数点后数字的位数</p></blockquote> <p>然后在<strong>数据监听器observers</strong>中调用此方法，并传递参数，代码如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> observers<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token punctuation">[</span><span class="token string">'playlist.playCount'</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token parameter">count</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">let</span> playCount <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPlayCount</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        playCount
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="custom-block warning"><p class="custom-block-title">注意</p> <p>如果要用setData()赋值,则不能直接给当前监听对象赋值,会造成死循环,例如:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token function">playlist</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
       playlist<span class="token operator">:</span><span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">.</span>
     <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>可以在data中声明一个变量,将值赋值给此变量</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>data<span class="token operator">:</span> <span class="token punctuation">{</span>
    playCount<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div> <p><code>getPlayCount</code>方法代码如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token function">getPlayCount</span><span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span>figure</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>val <span class="token operator">&gt;=</span> <span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> vals <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token operator">/</span><span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span>figure<span class="token punctuation">)</span>
        <span class="token keyword">return</span> vals <span class="token operator">+</span> <span class="token string">'亿'</span>
      <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> vals <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token operator">/</span><span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span>figure<span class="token punctuation">)</span>
        <span class="token keyword">return</span> vals <span class="token operator">+</span> <span class="token string">'万'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><hr> <p>组件的样式部分就不做过多的介绍，代码如下：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.playlist</span> <span class="token punctuation">{</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.img</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 6rpx<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.img .picUrl</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.img .playCount</span> <span class="token punctuation">{</span>
  <span class="token comment">/* width: 100rpx; */</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40rpx<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 40rpx<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 24rpx<span class="token punctuation">;</span>
  <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1rpx 0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.7<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 6rpx<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 26rpx<span class="token punctuation">;</span>
  <span class="token property">padding-right</span><span class="token punctuation">:</span> 5rpx<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #f3f2f2fb<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.4<span class="token punctuation">)</span>
    <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
    no-repeat 0 8rpx<span class="token punctuation">;</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> 24rpx<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.name</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 26rpx<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 4rpx 5rpx 0<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
  <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
  <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div><div class="custom-block warning"><p class="custom-block-title">注意</p> <p>在小程序中，<code>background</code>的背景图片(url)是不能使用网络图片的，只能使用小程序中的本地图片，或者是使用<code>base64</code>格式的图片，可以使用<a href="https://c.runoob.com/front-end/59" target="_blank" rel="noopener noreferrer">图片转BASE64编码|菜鸟工具<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>网站将图片转换成base64格式的图片</p></div> <h2 id="读取歌单数据-并且插入数据库-旧"><a href="#读取歌单数据-并且插入数据库-旧" class="header-anchor">#</a> 读取歌单数据，并且插入数据库(旧)</h2> <p>之前渲染在页面中的数据都是手动写死的，现在我们可以通过动态获取接口中的数据，将数据渲染在页面中。</p> <p>数据接口：(购买课程后即可获得)</p> <h3 id="创建云函数getplaylist"><a href="#创建云函数getplaylist" class="header-anchor">#</a> 创建云函数getPlaylist</h3> <p>右键<code>cloudfunctions</code>文件夹，选择<code>新建node.js云函数</code>，创建云函数getPlaylist，创建完成之后，我们需要往服务器端发送请求，请求数据。</p> <h3 id="如何发送请求"><a href="#如何发送请求" class="header-anchor">#</a> 如何发送请求</h3> <p>这里我们需要借助第三方的库<code>request-promise</code>，以下是安装步骤（需要事先安装好node）：</p> <ol><li><p>右键刚才建好的云函数，选择<code>在终端中打开</code></p></li> <li><p>先安装<code>request</code>库</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> <span class="token function">install</span> --save request
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>再安装<code>request-promise</code>库</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> <span class="token function">install</span> --save request-promise
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ol> <p>安装成功之后，我们打开package.json文件，若出现以下代码，则安装成功</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code> <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.88.2&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;request-promise&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.2.6&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;wx-server-sdk&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~2.4.0&quot;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>安装好第三方库<code>request-promise</code>之后，我们可以在index.js文件中引入这个库</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">const</span> rp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'request-promise'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>引入之后，就可以编写代码请求数据接口中的数据了，具体代码如下</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">URL</span> <span class="token operator">=</span> <span class="token string">'https://musicapi.xiecheng.live/personalized'</span>  <span class="token comment">//此接口为测试接口，仅供参考</span>
 <span class="token comment">// 云函数入口函数</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">const</span> playlist <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">rp</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">.</span>result
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>playlist<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">提示</p> <p>使用<code>request-promise</code>为旧方法，下面会介绍新的方法</p></div> <h3 id="上传云函数"><a href="#上传云函数" class="header-anchor">#</a> 上传云函数</h3> <p>在上一步中，微信小程序控制台并不会输出<code>console.log(playlist)</code>对应的日志，我们需要将云函数上传到云端，才可以看见打印的日志。上传云函数的方法：右键当前云函数，选择<code>上传并部署：云端安装依赖（不上传node_modulels）</code>(在云端可以帮我们安装对应的依赖)，等待上传成功即可。</p> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>在云函数中修改任意地方，都需要保存后重新上传到云端。</p></div> <h3 id="云端测试"><a href="#云端测试" class="header-anchor">#</a> 云端测试</h3> <p>点击微信开发者工具左上角的<code>云开发</code>，进入<code>云开发控制台</code>，点击<code>云函数</code>,就可以看到我们刚才上传的云函数。点击云端测试，删除模板中的参数，点击运行测试，等待一会就可以看到结果。</p> <h3 id="将数据插入数据库"><a href="#将数据插入数据库" class="header-anchor">#</a> 将数据插入数据库</h3> <ol><li><p>在<code>云开发控制台</code>中，点击数据库</p></li> <li><p>创建集合<code>playlist</code></p></li> <li><p>在云函数中定义一个数据库</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> db <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>通过<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.add.html" target="_blank" rel="noopener noreferrer">Collection.add<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>方法，将数据添加入数据库</p></li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code>   <span class="token keyword">const</span> db <span class="token operator">=</span> cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 云函数入口函数</span>
   exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
   	<span class="token keyword">const</span> playlist <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">rp</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
   		<span class="token keyword">return</span> res
   	<span class="token punctuation">}</span><span class="token punctuation">)</span>
   	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>playlist<span class="token punctuation">)</span>
       <span class="token comment">//用for循环的方式，遍历数组中的元素，并插入到数据库中</span>
       <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator">&lt;</span> playlist<span class="token punctuation">.</span>length <span class="token punctuation">;</span> i <span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
           <span class="token keyword">await</span> db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'playlist'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
               <span class="token operator">...</span>playlist<span class="token punctuation">,</span>
               createTime<span class="token operator">:</span>db<span class="token punctuation">.</span><span class="token function">serverData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
           <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
               console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'插入成功！'</span><span class="token punctuation">)</span>
           <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">err</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'插入失败！'</span><span class="token punctuation">)</span>
           <span class="token punctuation">}</span><span class="token punctuation">)</span>
       <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="读取歌单数据-并且插入数据库-新"><a href="#读取歌单数据-并且插入数据库-新" class="header-anchor">#</a> 读取歌单数据，并且插入数据库(新)</h2> <p>相比之前旧的方法，有以下优化内容</p> <ul><li>请求方式优化</li> <li>请求API优化</li> <li>批量插入数据方式优化</li></ul> <h3 id="新的发送请求的方式"><a href="#新的发送请求的方式" class="header-anchor">#</a> 新的发送请求的方式</h3> <p>这里我们需要借助第三方的库<code>axios</code>，以下是安装步骤（需要事先安装好node）：</p> <ol><li><p>右键刚才建好的云函数，选择<code>在终端中打开</code></p></li> <li><p>先安装<code>axios</code>库</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> <span class="token function">install</span> --save axios
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ol> <p>安装成功之后，我们打开package.json文件，若出现以下代码，则安装成功</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code> <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;axios&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^0.21.1&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.88.2&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;request-promise&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.2.6&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;wx-server-sdk&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~2.4.0&quot;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>安装好第三方库<code>axios</code>之后，我们可以在index.js文件中引入这个库</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>	<span class="token keyword">const</span> axios <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'axios'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>引入之后，就可以编写代码请求数据接口中的数据了，具体代码如下</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口函数</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">&gt;=</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token number">0</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> playlist <span class="token operator">=</span> data<span class="token punctuation">.</span>result
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>playlist<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 循环 遍历 .将数据插入到数据库中</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>playlist<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">await</span> db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'playlist'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      data<span class="token operator">:</span><span class="token punctuation">[</span><span class="token operator">...</span>playlist<span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;插入成功!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;插入失败!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
 
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="歌单数据去重"><a href="#歌单数据去重" class="header-anchor">#</a> 歌单数据去重</h2> <p>当从服务器获取的歌单信息有重复时,若没有去重操作,那么歌单列表的数据可能会有重复,此时我们就需要在请求数据的时候对数据进行去重。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 对请求的数据进行去重</span>
<span class="token keyword">const</span> newData<span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token comment">//用两层for循环,将请求来的数据,进行去重</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i <span class="token operator">&lt;</span> playlist<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">let</span> flag <span class="token operator">=</span> <span class="token boolean">true</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>j <span class="token operator">&lt;</span> list<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>playlist<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id <span class="token operator">===</span> list<span class="token punctuation">.</span>data<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">{</span>
      flag <span class="token operator">=</span> <span class="token boolean">false</span>
      <span class="token keyword">break</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>flag<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 更新代码: 给每个歌单信息增加createTime属性</span>
    <span class="token keyword">let</span> pl <span class="token operator">=</span> playlist<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    pl<span class="token punctuation">.</span>createTime <span class="token operator">=</span> db<span class="token punctuation">.</span><span class="token function">serverDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// newData.push(playlist[i])</span>
    newData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>pl<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>我们可以定义一个新的数组<code>newData</code>来存放去重后的数据，通过两层for循环,筛选出不一样的数据。</p> <h2 id="突破获取数据条数限制"><a href="#突破获取数据条数限制" class="header-anchor">#</a> 突破获取数据条数限制</h2> <p>在微信小程序中，从云端获取的数据是有限的，具体可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html" target="_blank" rel="noopener noreferrer">点击查看<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>,要想突破这种限制，需要自己编写代码分批获取：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 先取出集合记录总数</span>
<span class="token keyword">const</span> countResult <span class="token operator">=</span> <span class="token keyword">await</span> playlistCollection<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token constant">MAX_LIMIT</span> <span class="token operator">=</span> <span class="token number">100</span>
<span class="token comment">//获取 countResult 中的总条数</span>
<span class="token keyword">const</span> total <span class="token operator">=</span> countResult<span class="token punctuation">.</span>total
<span class="token comment">// 计算需分几次取</span>
<span class="token keyword">const</span> batchTimes <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>total <span class="token operator">/</span> <span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span>
<span class="token comment">// 承载所有读操作的 promise 的数组</span>
<span class="token keyword">const</span> tasks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> batchTimes<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//skip:从第几条数据开始读取   limit:每次读取的条数</span>
  <span class="token keyword">const</span> promise <span class="token operator">=</span> playlistCollection<span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>i <span class="token operator">*</span> <span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token constant">MAX_LIMIT</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  tasks<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>promise<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> list <span class="token operator">=</span> <span class="token punctuation">{</span>
  data<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>tasks<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  list <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>tasks<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token operator">:</span> acc<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>cur<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h2 id="上传触发器"><a href="#上传触发器" class="header-anchor">#</a> 上传触发器</h2> <p>如果云函数需要定时 / 定期执行，也就是定时触发，我们可以使用云函数定时触发器。配置了定时触发器的云函数，会在相应时间点被自动触发，函数的返回结果不会返回给调用方法。代码如下，具体可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/triggers.html" target="_blank" rel="noopener noreferrer">定时触发器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;triggers&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;myTrigger&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;timer&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0 0 10,14,16,23 * * * *&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="上拉加载和下拉刷新"><a href="#上拉加载和下拉刷新" class="header-anchor">#</a> 上拉加载和下拉刷新</h2> <h3 id="查询歌单信息"><a href="#查询歌单信息" class="header-anchor">#</a> 查询歌单信息</h3> <p>新建一个云函数<code>music</code>，在里面获取音乐相关的数据：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口文件</span>
<span class="token keyword">const</span> cloud <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'wx-server-sdk'</span><span class="token punctuation">)</span>

cloud<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 云函数入口函数</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'playlist'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>start<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string">'createTime'</span><span class="token punctuation">,</span><span class="token string">'desc'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> res
    <span class="token punctuation">}</span><span class="token punctuation">)</span>  
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>在playlist页面中，在methods中新建一个方法<strong>getPlaylist</strong>，用来调用云函数或取歌单数据，代码如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">getPlaylist</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'加载中'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      name<span class="token operator">:</span><span class="token string">&quot;music&quot;</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span><span class="token punctuation">{</span>
        start<span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>playList<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
        count<span class="token operator">:</span><span class="token constant">MAX_LIMIT</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token comment">//当数据请求完成后,隐藏消息提示框</span>
       wx<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">'没有新的歌单喽!'</span><span class="token punctuation">,</span>
          icon<span class="token operator">:</span><span class="token string">'none'</span><span class="token punctuation">,</span>
          duration<span class="token operator">:</span> <span class="token number">1500</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token comment">//当触发下拉触底函数时,我们应该在原有15条数据的基础上,再用concat拼接加载的数据</span>
        playList<span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>playList<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token comment">//当数据请求完成后,停止下拉刷新的动作</span>
      wx<span class="token punctuation">.</span><span class="token function">stopPullDownRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>在<strong>onReachBottom</strong>函数中调用<strong>getPlaylist方法</strong>，来实现数据上拉加载：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">/**
   * 页面上拉触底事件的处理函数
   */</span>
  <span class="token function-variable function">onReachBottom</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPlaylist</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>在<strong>onPullDownRefresh</strong>函数中将playList数组清空，，并且调用<strong>getPlaylist</strong>方法，来实现数据下拉刷新：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
   * 页面相关事件处理函数--监听用户下拉动作
   */</span>
  <span class="token function-variable function">onPullDownRefresh</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      playList<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPlaylist</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="对云函数路由进行优化"><a href="#对云函数路由进行优化" class="header-anchor">#</a> 对云函数路由进行优化</h2> <p><a href="https://github.com/TencentCloudBase/tcb-router" target="_blank" rel="noopener noreferrer">tcb-router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="为什么要使用tcb-router"><a href="#为什么要使用tcb-router" class="header-anchor">#</a> 为什么要使用tcb-router</h3> <ul><li>一个用户在云函数中只能创建50个云函数</li> <li>相似的请求归类到同一个云函数处理</li> <li>tcb-router是一个koa风格的云函数路由库</li></ul> <h3 id="使用tcb-router优化之前获取数据的代码"><a href="#使用tcb-router优化之前获取数据的代码" class="header-anchor">#</a> 使用tcb-router优化之前获取数据的代码</h3> <p>安装<code>tcb-router</code>,右键music云函数，打开终端，输入以下命令:</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token function">npm</span> <span class="token function">install</span> --save tcb-router
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>云函数<code>music</code>中</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 云函数入口文件</span>
<span class="token keyword">const</span> cloud <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'wx-server-sdk'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> TcbRouter <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'tcb-router'</span><span class="token punctuation">)</span>

cloud<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 云函数入口函数</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TcbRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>event<span class="token punctuation">}</span><span class="token punctuation">)</span>

  app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'playlist'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token keyword">await</span> cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'playlist'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">skip</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>start<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string">'createTime'</span><span class="token punctuation">,</span><span class="token string">'desc'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> res
    <span class="token punctuation">}</span><span class="token punctuation">)</span>   
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> app<span class="token punctuation">.</span><span class="token function">serve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>       
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>playlist页面中：</p> <p>在<strong>getPlaylist</strong>方法的<strong>wx.cloud.callFunction</strong>里面，</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>data<span class="token operator">:</span><span class="token punctuation">{</span>
        start<span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>playList<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
        count<span class="token operator">:</span><span class="token constant">MAX_LIMIT</span><span class="token punctuation">,</span>
        $url<span class="token operator">:</span><span class="token string">'playlist'</span>
      <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>在data中添加<code>$url:'playlist'</code></p> <p>具体使用方法可以参考<a href="https://blog.csdn.net/hongxue8888/article/details/104599794/" target="_blank" rel="noopener noreferrer">点我<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/28/2021, 9:55:01 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/myblog/guide/notes/10.html" class="prev">
        组件化开发
      </a></span> <span class="next"><a href="/myblog/guide/notes/12.html">
        自定义歌曲列表组件musiclist
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/myblog/assets/js/app.5e430372.js" defer></script><script src="/myblog/assets/js/2.4f8c3bb6.js" defer></script><script src="/myblog/assets/js/19.8d4a4dec.js" defer></script>
  </body>
</html>
